<template>
  <div class="qy-page-user">
    <!-- 我的页 -->
    <div class="page-top">
      <div class="user-wrap">
        <div class="user-photo">
          <generatePhoto width="52px" id="20" text="DEMO"></generatePhoto>
        </div>
        <div class="user-info">
          <div class="info-top ellipsis">DEMO</div>
          <div class="info-bottom">蘑竹科技有限公司</div>
		  <div class="info-bottom">技术研发部</div>
        </div>
        <div class="user-edit"></div>
        <div class="icon-box flex-wrap flex-text-mid flex-end">
          <div class="icon-item user-setting" @click="goPage('setting-home')">设置</div>
        </div>
      </div>
      <div class="data-wrap">
        <div class="each" >
          <div class="value">10</div>
          <div class="name">课程完成数</div>
        </div>
        <div class="each" >
          <div class="value">160</div>
          <div class="name">总学时(时)</div>
        </div>
        <div class="each" >
          <div class="value">30</div>
          <div class="name">今日学时(时)</div>
        </div>
      </div>
    </div>
    <div class="page-icon-wrap">
      <div class="wrap-each-grunp" v-for="(item, index) in manaCellList" :key="index">
        <div class="wrap-each-title fs-14 fc-333">{{item.name}}</div>
        <div class="wrap-each">
          <div class="icon-each" @click="cellClick(it)" v-for="(it, i) in item.hkDcbWapUserCenterMenuDtoList"
               :key="i">
            <van-badge :dot="!!totalWaitAuditCount" v-if="it.menuCode === 'AUDIT_CENTER' && totalWaitAuditCount">
              <img :src="it.menuCustomIconHttpUrl" alt="" v-if="it.menuCustomIconHttpUrl">
              <i :class="['icon', 'iconfont', it.menuIcon]" v-else></i>
              <div class="fc-666">{{ it.name }}</div>
            </van-badge>
            <van-badge :dot="!!msgNoReadCount" v-else-if="it.menuCode === 'MY_MESSAGE' && msgNoReadCount">
              <img :src="it.menuCustomIconHttpUrl" alt="" v-if="it.menuCustomIconHttpUrl">
              <i :class="['icon', 'iconfont', it.menuIcon]" v-else></i>
              <div class="fc-666">{{ it.name }}</div>
            </van-badge>
            <template v-else>
              <img :src="it.menuCustomIconHttpUrl" alt="" v-if="it.menuCustomIconHttpUrl">
              <i :class="['icon', 'iconfont', it.menuIcon]" v-else></i>
              <div class="fc-666">{{ it.name }}</div>
            </template>

          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters, mapState, mapActions} from 'vuex'
import {allJobStage} from '@/assets/js/constant'
import {getConfigName, sum} from '@/assets/js/util'
import userIcon from '@/static/image/icon_my_user.png'
import chatIcon from '@/static/image/icon_my_chat.png'
import starIcon from '@/static/image/icon_my_star.png'
import setIcon from '@/static/image/icon_my_set.png'
import generatePhoto from "@/components/dragMaker/generatePhoto"
import VanBadge from "@/components/vant/van-badge/van-badge.vue";
import VanIcon from "@/components/vant/van-icon/van-icon.vue";
import mockData from "@/mock/user/index.json"
export default {
  head() {
    return {
      title: '我的'
    }
  },
  components: {
    VanIcon,
    VanBadge,
    generatePhoto
  },
  data() {
    return {
      msgNoReadCount: 0,
      learnStatistics: {},
      totalWaitAuditCount: 0, // 审核中的数量
      baseCellList: [],
      manaCellList: [],
      recordLogList: [],
      allStudyTimeStr: '',
      page: {
        pageNumber: 1,
        pageSize: 8
      },
      userInfo: {}
    }
  },

  created() {

  },
  mounted() {


  },
  onShow() {
      this.getUserCenterMenuList()
  },
  methods: {
    getUserCenterMenuList() {
		this.manaCellList = mockData.data.map(e => {
			  e.name = e.menuName
			  e.resourceUrl = e.goTarget
			  e.logoHttpUrl = e.menuCustomIconHttpUrl
			  e.hkDcbWapUserCenterMenuDtoList = e.hkDcbWapUserCenterMenuDtoList.map(item => {
				item.name = item.menuName
				item.resourceUrl = item.goTarget
				item.logoHttpUrl = item.menuCustomIconHttpUrl
				return item
			  }).filter(item=>item.menuCode !== 'ERROR_COLLECTION')
			  return e
		})
    },
    cellClick(item) {
      let url = item.url || item.resourceUrl
      if (url) {
        this.$uniPush(url)
      } else {
        this.$toast.warning('仅用作 DEMO 展示')
      }
    },
    goPage(url, query) {
      this.$uniPush({
        name: url,
        query: query
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.qy-page-user {
  background: #f6f6f6;
  padding-bottom: 60px;

  .page-top {
    swiper {
      height: 95px;
    }

    .user-wrap {
      position: relative;
      display: flex;
      padding: 45px 0 35px 20px;
      background: var(--color);
      height: 48vw;
      @media screen and (min-width: 450px) and (max-width: 540px) {
				height: 40vw;
			}
      @media screen and (min-width: 540px) and (max-width: 700px) {
				height: 32vw;
			}
      @media screen and (min-width: 700px) and (max-width: 850px)  {
				height: 25vw;
			}
			@media screen and (min-width: 850px) and (max-width: 1024px)  {
				height: 20vw;
			}
      @media screen and (min-width: 1024px) and (max-width: 1200px) {
				height: 17vw;
			}
      @media screen and (min-width: 1200px) {
				height: 15vw;
			}
      align-items: flex-start;

      //z-index: 1;
      &:before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-size: 100%;
        background-image: url('@/static/image/user-bg.png');
        z-index: 2;
      }

      .user-photo {
        position: relative;
        z-index: 3;
        width: 56px;
        height: 56px;
        border-radius: 50%;
        margin-right: 15px;
        border: 2px solid #fff;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 52px;
          height: 52px;
          border-radius: 50%;
        }
      }

      .user-info {
        position: relative;
        z-index: 3;
        width: calc(100% - 120px);
        line-height: 16px;

        .info-top {
          max-width: 140px;
          height: 22px;
          font-size: 16px;
          font-weight: 600;
          color: #FFFFFF;
          line-height: 22px;
          margin-bottom: 4px;
        }

        .info-bottom {
          //height: 17px;
          font-size: 12px;
          color: #fff;
          line-height: 14px;
          margin-bottom: 4px;
          max-width: 140px;

          .info-split-line {
            display: inline-block;
            margin: 0 4px;
            vertical-align: baseline;
          }
        }
      }

      .rank {
        position: absolute;
        right: 0;
        top: 35px;
        padding: 7px 15px;
        color: #fff;
        font-size: 14px;
        border-radius: 100px 0px 0px 100px;
        background: linear-gradient(151deg, #f0c783 0%, #dba957 100%);

        i {
          vertical-align: -2px;
          background-image: url('@/static/image/icon_rank.png');
          width: 16px;
          height: 16px;
          background-size: 100%;
          margin-right: 3px;
          display: inline-block;
        }
      }

      .user-edit {
        position: absolute;
        left: 54px;
        top: 79px;
        width: 18px;
        height: 18px;
        z-index: 3;
        background-size: 100%;
        background-image: url('@/static/image/icon-user-edit1.png');
      }

      .icon-box {
        position: relative;
        z-index: 3;
        padding-right: 10px;

        .icon-item {
          margin-left: 10px;
          width: 24px;
          padding-top: 26px;
          height: 40px;
          font-size: 10px;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 14px;
          text-align: center;
          white-space: nowrap;
          background-size: 24px 24px !important;
        }
      }

      .user-setting {
        background: url('@/static/image/icon-user-setting1.png') no-repeat;
      }

      .user-msg {
        background: url('@/static/image/icon-user-msg.png') no-repeat;
        :deep(.van-badge--fixed) {
          top: -10px;
        }
      }

      .user-audit {
        background: url('@/static/image/icon-user-audit.png') no-repeat;
        :deep(.van-badge--fixed) {
          top: -10px;
        }
      }

      .order-icon {
        background: url('@/static/image/icon-user-order1.png') no-repeat;
      }
    }

    .data-wrap {
      position: relative;
      z-index: 3;
      background: #fff;
      display: flex;
      padding: 15px 0;
      width: calc(100% - 30px);
      border-radius: 6px;
      margin: -38px auto 0;
      flex: 1;

      .each {
        //flex: 0 0 20%;
        width: 100%;
        text-align: center;

        &:not(:last-child) {
          position: relative;

          &:after {
            content: '';
            position: absolute;
            top: 10px;
            right: 0;
            width: 1px;
            height: 20px;
            background: #EEEEEE;
          }
        }

        .value {
          font-size: 17px;
          font-weight: 600;
          color: #333333;
          line-height: 25px;
        }

        .name {
          font-size: 10px;
          transform: scale(0.9);
          white-space: nowrap;
          line-height: 14px;
          margin-top: 6px;
          color: #666;

          .van-icon {
            font-size: 10px;
            transform: scale(0.7);
            margin-top: -2px;
          }
        }
      }
    }

    .list-wrap {
      width: calc(100% - 30px);
      margin: 10px auto;
      border-radius: 6px;
      background-color: #fff;
      padding-bottom: 15px;
      padding-top: 5px;
    }

    .wrap-common-title {
      padding: 0 15px;

      .title-left {
        font-size: 14px;
        font-weight: 500;
        color: #000000;
        line-height: 20px;
      }

      .title-right {
        span {
          color: #7f7f7f;
          margin-right: 2px;
        }
      }

      .van-icon {
        font-size: 12px;
        color: #7f7f7f;
      }
    }

    .record-list {
      padding: 0 15px;
      margin-top: 8px;

      :deep(.list-item) {
        .pub-corner {
          width: 41.3px;
          height: 40.6px;
          right: 10px;
        }

        img {
          margin-right: 10px;
          // width: 112px;
          height: 63px;
        }

        .item-name {
          color: #666666;
          font-size: 12px;
          // width: 110px;
          margin-top: 6px;
          margin-right: 10px;
        }
      }

      .item-default-img {
        // width: 112px;
        height: 69px;
        margin-right: 10px;
        background: url('@/static/image/course-img.png') no-repeat;
        background-size: cover !important;

        &.live-top {
          height: 69px;
          background: url('@/static/image/live_status_round_0.png') center no-repeat !important;
          background-size: cover !important;

          &.gray {
            background: url('@/static/image/live_status_round_0.png') center no-repeat !important;
            background-size: cover !important;

            .date {
              color: #333;
            }
          }
        }

        .item-default-text {
          font-size: 12px;
          color: #fff;
          text-align: center;
          padding: 0 10px;
        }
      }
    }
  }

  .page-icon-wrap {
    .wrap-each-grunp {
      margin: 10px 15px;
      padding: 15px 15px 0 15px;
      background: #fff;
      border-radius: 6px;
    }

    .wrap-each-title {
      padding-bottom: 4px;
    }

    .wrap-each {
      display: flex;
      flex-wrap: wrap;
    }

    .icon-each {
      width: 50px;
      text-align: center;
      font-size: 12px;
      margin-bottom: 20px;
      margin-top: 10px;
      flex: 0 0 25%;

      .iconfont {
        display: inline-block;
        font-size: 22px;
        margin-bottom: 4px;
        color: #666 !important;
      }

      img {
        width: 26px;
        height: 26px;
        margin-bottom: 8px;
      }
    }
  }

  .common-list-wrap {
    width: calc(100% - 30px);
    margin: 10px auto;
    border-radius: 6px;
    background-color: #fff;
    padding: 15px;

    .title-left {
      font-size: 14px;
      font-weight: 500;
      color: #000000;
      line-height: 20px;
    }

    .van-icon {
      font-size: 12px;
      color: #7f7f7f;

      &.fs-10 {
        font-size: 10px;
      }
    }

    .fc-primary {
      margin: 0 4px;
    }

    .view-chart {
      height: 170px;
    }
  }

  .page-cell-wrap {
    padding: 15px;

    .page-cell {
      border-radius: 17px;
      margin-bottom: 10px;
      padding: 12px 10px;
      background: #fff;

      :deep(.van-cell) {
        &::after {
        display: none;
        }
      }

      :deep(.van-cell__title),
      :deep(.van-cell__value) {
        line-height: 24px;
      }
    }

    img {
      width: 20px;
      height: 20px;
      background-size: 100%;
      margin: 2px 15px 0 0;
    }
  }
}
</style>